{% extends "base.html" %}
{% load staticfiles %}

{% block title %}
	图灵课程 - 个人信息


{% endblock %}






{% block content %}


<div class="container question" style="margin-top: 20px">

	<ul class="nav nav-tabs" role="tablist" id="myTab">
	  <li role="presentation" ><a href="#news" id="news-tab" aria-controls="news" data-toggle="tab" class="active">最新动态</a></li>
	  <li role="presentation" ><a href="#basics" id="basics-tab" aria-controls="basics" data-toggle="tab">个人信息</a></li>
	  <li role="presentation" ><a href="#topics" id="topics-tab" aria-controls="topics" data-toggle="tab">查看标签</a></li>
	</ul>


	<div id="myTabContent" class="tab-content"  align="center" style="margin-top: 10px">
      <div role="tabpanel" class="tab-pane fade in active" id="news" aria-labelledBy="news-tab">
				<!--
				<div class="pull-right">
        	<span>选择统计范围：</span>
        	<script type="text/javascript" src=" {% static 'js/year_month_day.js' %}" ></script>
					<select id="selYear_from"></select>
					<select id="selMonth_from"></select>
					<select id="selDay_from"></select>
					<script type="text/javascript">
						var selYear_from = window.document.getElementById("selYear_from");
						var selMonth_from = window.document.getElementById("selMonth_from");
						var selDay_from = window.document.getElementById("selDay_from");
						new DateSelector(selYear_from, selMonth_from, selDay_from, 2016, 2, 29);
					</script>
					<span>&emsp;—&emsp;</span>
					<select id="selYear_to"></select>
					<select id="selMonth_to"></select>
					<select id="selDay_to"></select>
					<script type="text/javascript">
						var selYear_to = window.document.getElementById("selYear_to");
						var selMonth_to = window.document.getElementById("selMonth_to");
						var selDay_to = window.document.getElementById("selDay_to");
						new DateSelector(selYear_to, selMonth_to, selDay_to, 2016, 2, 29);
					</script>
				</div>
				-->
		<br><br>

		<div class="statistics container">
        	<div class="col-md-4 statistics_sort" style="border-right: 0px ">
        		总回答数：{{answerNum}}
        	</div>
        	<div class="col-md-4 statistics_sort">
        		获得赞数：{{praiseNum}}
        	</div>
        	<div class="col-md-4 statistics_sort" >
        		总提问数：{{questionNum}}
        	</div>

        </div><br><br>
        <div style="border-bottom: 1px solid #999; "> </div>

        <!-- 时间线 -->
        <div style="margin-top: 10px">
					{% for i in list %}
	        <a href="/QuestionDetails/?id={{i.questionID}}">问题：{{i.questionAbstract}} 有新回复啦！</a><div style="border-bottom: 1px solid #eee; "> </div>
	        {% endfor %}
					{% if not list %}
					<p>暂时没有新回复！</p><div style="border-bottom: 1px solid #eee; "> </div>
					{% endif %}
			</div>
      </div>

      <div role="tabpanel" class="tab-pane fade" id="basics" aria-labelledBy="basics-tab">
        <div style="color: inherit; padding: 15px" align="center" class="basics_info container">
		    <form>
		        <table>
		
		        		<div class="basics_mess_img">
					       <img src="{% static 'image/111.png' %}" class="img-responsive" alt="" >

				        </div><br>

		        	
			        	<div class="basics_mess_total">
				        	<div  class="basics_mess" >
					        <span class="glyphicon glyphicon-user"></span>&nbsp;用户名:
					        </div>
							 <div class="basics_mess_right">
									<span id='username'>{{user.UserID}}</span>
									<input id="username_in" type="text" value="{{user.UserID}}" style="display:none;">
				             </div>

			        
				        	<div  class="basics_mess" >
					        <span class="glyphicon glyphicon-heart-empty"></span>&nbsp;昵称:
					   		</div>
							 <div class="basics_mess_right">
							 <span id="nickname">{{user.NickName}}</span>
									<input id="nickname_in" type="text" value="{{user.NickName}}" style="display:none;">
								</div>

			      
				        	<div  class="basics_mess" >
					        <span class="glyphicon glyphicon-envelope"></span>&nbsp;邮箱:
							</div>
							<div class="basics_mess_right">	
					        <span id="email">{{user.UserEmail}}&nbsp;</span>
									<input id="email_in" type="text" value="{{user.UserEmail}}" style="display:none;">
						  	</div>
			       
				        	<div  class="basics_mess" >
					        <span class="glyphicon glyphicon-comment"></span>&nbsp;QQ:
							</div>
							<div class="basics_mess_right">	
									<span id="qq">
										{{user.UserQQ}}
										{% if not user.UserQQ %}
											暂未设置
										{% endif %}
									</span>
									<input id="qq_in" type="text" value="{{user.UserQQ}}" style="display:none;">
							</div>
			     
				        	<div  class="basics_mess" >
					        <span class="glyphicon glyphicon-phone"></span>&nbsp;手机号码:
							</div>
							<div class="basics_mess_right">	
									<span id="telephone">
											{{user.MobilePhone}}
											{% if not user.MobilePhone %}
												暂未设置
											{% endif %}
									</span>
									<input id="telephone_in" type="text" value="{{user.MobilePhone}}" style="display:none;">
							</div>
		        	</div>
		        </table>
		    </form>
		</div>

      </div>
      <div role="tabpanel" class="tab-pane fade" id="topics" aria-labelledBy="topics-tab">
	    <div class="topics">
	        <p>
		        <button type="button" class="btn btn-default info-tag">C/C++</button>
		        <button type="button" class="btn btn-default info-tag">高数</button>
		        <button type="button" class="btn btn-default info-tag">线性代数</button>
		        <button type="button" class="btn btn-default info-tag">概率论</button>

		        <button type="button" class="btn btn-link"><span class="glyphicon glyphicon-plus"></span></button>

		        <button type="button" class="btn btn-link"><span class="glyphicon glyphicon-minus"></span></button>
		    </p>
		</div>

      </div>

    </div>

    <!--a href="/Accounts/logout/" type="button" class="pull-right" style="margin-top: 50px">退出</a-->
</div>




{% endblock %}
{% block other_script %}

<script type="text/javascript">
	$('#myTab a').click(function (e) {
	  e.preventDefault()
	  $(this).tab('show')
	})

	//$('#myTab a[href="#news"]').tab('show') // Select tab by name
	$('#myTab li:eq(0) a').tab('show') // Select first tab
	//$('#myTab li:eq(1) a').tab('show') // Select last tab
	//$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

</script>
<script type="text/javascript" src = "{% static 'js/personalInfo.js' %}"></script>


{% endblock %}
